<template>
  <div>
    <!-- 卡片视图 -->
    <el-card shadow="always">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>运营</el-breadcrumb-item>
        <el-breadcrumb-item>代报员列表</el-breadcrumb-item>
        <el-button
          type="primary"
          id="addErrand"
          style="float:right;margin-right:20px"
          @click="addErrand"
          >推荐添加代报员</el-button
        >
      </el-breadcrumb>
      <!-- 搜索框 -->
      <div class="maxdiv">
        <div class="top_main">
          <span
            @click="topClick(item.type)"
            v-for="(item, index) in typeList"
            :key="index"
            :class="[
              'top_main_list',
              checkType == item.type ? 'clicked_top' : '',
            ]"
            >{{ item.title }}</span
          >
        </div>
        <el-input
          style="width:280px;"
          placeholder="请输入代报员姓名"
          class="search"
          v-model="searchData"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>>
          <el-button slot="append" @click="searchBtn" :disabled="isDisabled"
            >搜索</el-button
          >
        </el-input>
        <!-- 添加 -->

        <!-- 数据列表 -->
        <div style="padding:0 30px">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            v-if="checkType == 1"
            @row-click="showDetail"
          >
            <el-table-column
              type="index"
              label="#"
              width="75"
            ></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="phone" label="手机号"></el-table-column>
            <el-table-column label="头像">
              <template slot-scope="scope">
                <img
                  style="width:50px;height:50px"
                  :src="`${scope.row.photo}`"
                />
              </template>
            </el-table-column>
            <el-table-column prop label="入职时间"></el-table-column>
            <el-table-column prop label="完成单数"></el-table-column>
            <el-table-column prop label="准时率"></el-table-column>
            <el-table-column prop label="权限"></el-table-column>
            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="设置报销分类权限"
                  placement="top"
                  :enterable="false"
                >
                  <el-button
                    @click.stop="setPower(scope.row)"
                    type="warning"
                    size="mini"
                  >
                    <i class="el-icon-setting" style="pointer-events:none"></i>
                  </el-button>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  v-if="checkType == 2"
                  content="实名审核"
                  placement="top"
                  :enterable="false"
                >
                  <el-button
                    @click="checkSmsh(scope.row)"
                    type="warning"
                    size="mini"
                  >
                    <i
                      class="el-icon-edit-outline"
                      style="pointer-events:nonem;"
                    ></i>
                  </el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="padding:0 30px">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            v-if="checkType == 2"
          >
            <el-table-column
              type="index"
              label="#"
              width="75"
            ></el-table-column>
            <el-table-column prop="users_name" label="姓名"></el-table-column>
            <el-table-column
              prop="users_phone"
              label="手机号"
            ></el-table-column>
            <el-table-column label="头像">
              <template slot-scope="scope">
                <img class="photo" :src="scope.row.users_photo" />
              </template>
            </el-table-column>
            <el-table-column prop label="入职时间"></el-table-column>
            <el-table-column prop label="完成单数"></el-table-column>
            <el-table-column prop label="准时率"></el-table-column>
            <el-table-column prop label="权限"></el-table-column>
            <el-table-column label="操作" width="150">
              <!-- slot-scope="scope" -->
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="设置报销分类权限"
                  placement="top"
                  :enterable="false"
                >
                  <el-button
                    @click="setPower(scope.row)"
                    type="warning"
                    size="mini"
                  >
                    <i class="el-icon-setting" style="pointer-events:none"></i>
                  </el-button>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="实名审核"
                  placement="top"
                  :enterable="false"
                >
                  <el-button
                    @click="checkSmsh(scope.row)"
                    type="warning"
                    size="mini"
                  >
                    <i
                      class="el-icon-edit-outline"
                      style="pointer-events:nonem;"
                    ></i>
                  </el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="p"
          :page-sizes="[15, 20, 50, 80]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog
      title="推荐添加代报员"
      :visible.sync="dialogVisibleAddGroup"
      width="30%"
      @submit.native.prevent
    >
      <el-form class="demo-ruleForm" label-width="80px">
        <el-form-item label="手机号:" required>
          <input
            type="text"
            class="input_"
            v-model="dbyphone"
            placeholder="手机号"
          />
        </el-form-item>
        <el-form-item label="注册链接:">
          <span ref="regurl">{{ regurl }}</span>
          <input
            ref="regurl"
            style=" opacity: 0;width:0px;height:0px"
            type="text"
            v-model="regurl"
          />
        </el-form-item>
        <div v-if="copy" style="text-align:center;color:blue" @click="copyUrl">
          <span>点击复制</span>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="showadd">
        <el-button @click="dialogVisibleAddGroup = false">取消</el-button>
        <el-button type="primary" @click="addTrue" ref="addGroupRef"
          >添加</el-button
        >
      </span>
      <span v-else slot="footer">
        <el-button @click="dialogVisibleAddGroup = false">关闭</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="设置报销分类权限"
      :visible.sync="VisibleAddGroup"
      width="50%"
      @submit.native.prevent
    >
      <el-checkbox-group v-model="checkList">
        <el-checkbox
          v-for="item in checkboxlist"
          :key="item.id"
          :label="item.id"
          >{{ item.title }}</el-checkbox
        >
      </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="VisibleAddGroup = false">取消</el-button>
        <el-button type="primary" @click="isOk" ref="addGroupRef"
          >确定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="实名审核"
      :visible.sync="smshenhe"
      width="50%"
      @submit.native.prevent
    >
      <div v-if="dmshData">
        <div class="veriRevi">
          <span>账户名</span>
          <span>{{ dmshData.users_name }}</span>
        </div>
        <div class="veriRevi">
          <span>住址</span>
          <span>{{ dmshData.address }}</span>
        </div>
        <div class="veriRevi">
          <span>手机号</span>
          <span>{{ dmshData.address_phone }}</span>
        </div>
        <div class="veriRevi">
          <span>邮编</span>
          <span>{{ dmshData.address_postcode }}</span>
        </div>
        <div class="veriRevi">
          <span>身份证号</span>
          <span>{{ dmshData.id_card_number }}</span>
        </div>
        <div class="veriRevi">
          <span>身份证正面</span>
          <span>
            <img
              class="bigphoto"
              @click="
                img = dmshData.front_id_card;
                showbig = true;
              "
              :src="dmshData.front_id_card"
            />
          </span>
        </div>
        <div class="veriRevi">
          <span>身份证反面</span>
          <span>
            <img
              class="bigphoto"
              @click="
                img = dmshData.back_id_card;
                showbig = true;
              "
              :src="dmshData.back_id_card"
            />
          </span>
        </div>
        <div class="veriRevi">
          <span>审核</span>
          <!-- <el-select v-model="okOrUnok" style="width:50%">
                    <el-option v-for="(item) in shOptions" :key="item.value" :value="item.value" :label="item.laber"></el-option>
          </el-select>-->
          <span>
            {{ okOrUnok ? "通过" : "驳回" }}
            <el-switch
              v-model="okOrUnok"
              active-color="#13ce66"
              inactive-color="#ccc"
            ></el-switch>
          </span>
        </div>
        <div class="veriRevi" v-if="!okOrUnok">
          <span>理由:</span>
          <span>
            <el-input
              style="width:50%"
              type="textarea"
              placeholder="请输入驳回的理由"
              v-model="unOkLy"
            ></el-input>
          </span>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="smshenhe = false">取消</el-button>
        <el-button type="primary" @click="smOk" ref="addGroupRef"
          >确定</el-button
        >
      </span>
    </el-dialog>

    <!-- 详情 -->
    <el-dialog
      title="详情"
      closed
      :visible.sync="isShowDetail"
      width="50%"
      :before-close="handleClose"
    >
      <div>
        <el-table :data="usersList" border style="width: 100%">
          <el-table-column
            prop="created_at"
            label="日期"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="users_name"
            label="姓名"
            width="80"
          ></el-table-column>
          <el-table-column prop="address_phone" label="电话"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
          <el-table-column prop="address_name" label="地址"></el-table-column>
          <el-table-column
            prop="users_phone"
            label="用户电话"
          ></el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowDetail = false">取 消</el-button>
        <el-button type="primary" @click="isShowDetail = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <bigImg v-if="showbig" :img="img" @hidBig="showbig = false"></bigImg>
  </div>
</template>

<script>
import { get } from "../../../../public/API/query";
import config from "../../../../public/config";
import bigImg from "../../../components/bigImg";

export default {
  components: {
    bigImg,
  },
  data() {
    return {
      showbig: false,
      img: "",
      //不通过理由
      unOkLy: "",
      //通过或不通过
      okOrUnok: false,
      copy: false,
      dmshData: {},
      typeList: [
        { title: "全部", type: 1 },
        { title: "未审核实名认证代报员", type: 2 },
      ],
      checkType: 1,
      smshenhe: false,
      showadd: true,
      regurl: "添加成功后生成注册链接",
      checkList: [],
      checkboxlist: [],
      checkUser: {},
      //列表数据
      tableData: [],
      //查询参数
      p: 1,
      limit: 10,
      //总条数
      count: null,
      dialogVisible: false,
      currentPage4: 1,
      searchData: "",
      value: [],
      // 树形控件的属性绑定对象
      defaultProps: {
        children: "_child",
        label: "title",
      },
      treeData: [],
      dialogVisibleAddGroup: false,
      VisibleAddGroup: false,
      addGroupForm: {
        title: "",
      },
      //默认选择节点ID数组
      defaultKeys: [],
      isDisabled: false,
      userId: "",
      //添加的代报员手机号
      dbyphone: "",
      isShowDetail: false,

      // 代报人详情
      user: null,
      usersList: [],
    };
  },
  methods: {
    copyUrl() {
      this.$refs.regurl.select();
      console.log(this.$refs.regurl);
      var a = document.execCommand("copy");
      if (a) this.$message.success("复制成功");
    },
    topClick(type) {
      if (this.checkType != type) {
        this.checkType = type;
        this.getTableData();
      }
    },
    handleClose() {
      this.isShowDetail = false
    },
    smOk() {
      let param = { id: this.dmshData.id };
      param.type = this.okOrUnok ? 1 : -1;
      this.okOrUnok ? "" : (param.remark = this.unOkLy);
      get("operate/errand/submitVeriReview", param, (res) => {
        if (res.code == 200) {
          this.$message.success("成功");
          console.log(res);
          this.getTableData();
          this.addUserDialogVisible = false;
          this.smshenhe = false;
        } else {
          this.$message.error(res.data);
        }
      });
    },
    //显示实名审核弹窗
    checkSmsh(value) {
      this.dmshData = null;
      get("operate/errand/detail", { id: value.id }, (res) => {
        if (res.code == 200) {
          this.dmshData = res.data[0];
        } else {
          // Message.error("fail!");
          this.$message.error(res.data);
        }
        console.log(this.dmshData);
        this.smshenhe = true;
      });
    },
    addTrue() {
      get("operate/errand/getCode", { tel: this.dbyphone }, (res) => {
        this.showadd = false;
        this.copy = true;
        this.regurl = config.get("app_url") + "/" + res.data.keyword;
      });
    },
    isOk() {
      get(
        "operate/errand/subExpenseCate",
        { expenseCate_ids: this.checkList, users_id: this.checkUser.id },
        (res) => {
          if (res.code == 200) {
            this.$message.success("成功");
            this.VisibleAddGroup = false;
          }
        }
      );
    },
    //设置权限
    setPower(value) {
      this.checkUser = value;
      this.checkList = [];
      get("operate/errand/setExpenseCate", { id: value.id }, (res) => {
        this.checkboxlist = res.data.expenseCate;
        this.checkboxlist.forEach((item) => {
          if (item.isChoose == 1) {
            this.checkList.push(item.id);
          }
        });
        this.VisibleAddGroup = true;
      });
    },
    // 重置节点ID数组
    setRightDialogClose() {
      this.defaultKeys = [];
    },
    //提交权限按钮
    commitRightsBtn() {},
    //获取数据
    getTableData() {
      if (this.searchData) {
        get(
          "operate/errand/index",
          {
            p: this.p,
            limit: this.limit,
            type: this.checkType,
            title: this.searchData,
          },
          (res) => {
            this.tableData = res.data._list;
            this.count = res.data.count;
          }
        );
      } else {
        get(
          "operate/errand/index",
          {
            p: this.p,
            limit: this.limit,
            type: this.checkType,
          },
          (res) => {
            this.tableData = res.data._list;
            this.count = res.data.count;
          }
        );
      }
    },
    handleSizeChange(newSize) {
      this.limit = newSize;
      this.getTableData();
    },
    handleCurrentChange(newPage) {
      this.p = newPage;
      this.getTableData();
    },
    //搜索功能
    searchBtn() {
      this.getTableData();
    },
    //添加代报员
    addErrand() {
      this.copy = false;
      this.dbyphone = "";
      this.regurl = "添加成功后生成注册链接";
      this.showadd = true;
      this.dialogVisibleAddGroup = true;
    },
    //详情
    showDetail(row) {
      this.isShowDetail = true;
      get("operate/errand/detail", { id: row.id }, (res) => {
        this.usersList = res.data;
      });
    },
  },
  watch: {
    searchData: function() {
      if (!this.searchData) {
        this.getTableData();
      }
      if (this.searchData) {
        this.isDisabled = false;
      }
    },
  },
  created() {
    this.getTableData();
  },
};
</script>

<style lang="less" scoped>
.veriRevi {
  width: 100%;
  margin-top: 10px;
  span:nth-child(1) {
    width: 35%;
    text-align: left;
  }
  span:nth-child(2) {
    width: 65%;
    text-align: right;
  }
  &:last-of-type {
    margin-bottom: 20px;
  }
  span {
    vertical-align: top;
  }
}
.maxdiv {
  width: 100%;
  min-height: 100%;
  box-shadow: 1px 1px 10px #ccc, -1px -1px 10px #ccc;
  padding-bottom: 20px;
  .top_main {
    border-bottom: 1px solid #ccc;
    height: 40px;
    background: #f5f7fa;
    margin-bottom: 30px;

    .top_main_list {
      padding: 10px 22px;
      color: #909399;
      transition: 0.2s;
      font-size: 14px;
      &:hover {
        color: #409eff;
      }
      &:nth-child(1) {
        border-left: none;
      }
    }
    .clicked_top {
      color: #409eff;
      background: #fff;
      border-left: 1px solid #ccc;
      border-right: 1px solid #ccc;
      border-bottom: 1px solid #fff;
    }
  }
}
.hasorcanaddpower {
  margin-top: 20px;
}
.el-breadcrumb {
  margin-bottom: 30px;
}
.el-input {
  margin: 0 30px 30px;
  width: 280px;
}
.el-pagination {
  margin-top: 30px;
  margin-left: 30px;
}
.addRulesWrap {
  margin-left: 80px;
}
div.el-dialog__body {
  padding: 0;
}
.addRules {
  position: absolute;
  right: 25%;
  bottom: 5%;
}
.disable {
  margin-left: 15px;
}
.addErrand {
  margin-left: 80%;
}
</style>
